<template>
  <div class="container">
    <div class="handle-box">
      <div>
        <span class="handle_spanss"></span>
        <span>可提现</span>
        <el-button
          type="primary"
          style="margin-left:150px;"
          :disabled="isdisabledFn"
          @click="Cashwithdrawal"
        >提现</el-button>
      </div>
      


    <el-dialog title="提现" :visible.sync="dialogVisible" width="475px" :before-close="handleClose">
      <span class="Cash_spans">
        <p>提现前，请在财务中心-银行账号中确认银行卡信息准确无误</p>
      </span>
      <span class="Cash_Bank">
        <p class="Cash_Bank_Arrival">到账银行卡：</p>
        <p class="Cash_Bank_account">{{this.MechanismData.bankName}} ({{this.accountNumber}})</p>
      </span>
      <span class="Cash_Bank">
        <p class="Cash_Bank_Arrival">提现金额（全部可提现金额)：</p>
        <p class="Cash_Bank_account">￥{{this.MoneyData.withdrawableAmount}}</p>
      </span>
      <span class="Cash_Bank" style="border:none">
        <el-button
          type="primary"
          style="display:block;width:100%"
          :disabled="isdisabledFn"
          @click="Submission"
        >提交</el-button>
      </span>
    </el-dialog>
    <!-- 提现成功弹出框 -->
          <el-dialog
            title="提交成功"
            :visible.sync="CashSuccess"
            width="25%"
            :before-close="handleClose">
            <span>提现金额将在发起之日起t+7个工作内完成回款</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="Close">知道了</el-button>
            </span>
          </el-dialog>

    </div>
    <el-table :data="data" border style="width: 100%;margin-top:20px;">
      <el-table-column prop="id" label="订单编号"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      <el-table-column
          prop="discountAmount"
          label="订单有效金额(不含材料费)"
          label-class-name="订单有限金额=实际订单金额-材料费"
          :render-header="openAnnotation">
          <template slot="header" slot-scope="scope">
            订单有效金额(不含材料费)
            <el-tooltip class="item" effect="dark" content="订单有效金额=实际订单金额-材料费" placement="top">
            <i class="el-icon-info"></i>
          </el-tooltip>
          </template>
        </el-table-column> 
      <el-table-column prop="divideRatio" label="分成比率">
          <template slot-scope="scope">
            <p>{{scope.row.divideRatio}}</p>
          </template>
      </el-table-column>
      <el-table-column prop="divideAmount" label="可提现金额">
          <template slot-scope="scope">
            <p>￥{{scope.row.divideAmount}}</p>
          </template>
      </el-table-column>
        <el-table-column prop="organizationName" label="机构名称"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="pageData"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      fengye: 1,
      pageData: undefined,
      MoneyData: "",
      disabled:false,
      MoneyData: "",
      MechanisResData:'',
      MechanismData: [],
      accountNumber: "",
      dialogVisible: false,
      disabled:false,
      CashSuccess:false,
    };
  },
  created() {
    this.getData();
    this.MoneyDatas();
    this.bankAccount();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    },
    //  提交按钮不可用方法
    isdisabledFn() {
        console.log(this.MoneyData.withdrawableAmount);
      if (this.MoneyData.withdrawableAmount !== 0) {
        return this.disabled = false;
      } else {
        return this.disabled = true;
      }
    },
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取机构银行信息
    bankAccount() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/goods/xzs/bankAccount.info.get",
        data: {
          organizationId: organizationId
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.MechanismData = res.data.data;
          this.MechanisResData = res.data
          this.accountNumber = this.MechanismData.accountNumber.substr(-4);
        })
        .catch(err => {});
    },
    // 提现按钮
    Cashwithdrawal() {
      let resData = this.MechanisResData?this.MechanisResData:[]
      console.log(resData.data);
      if(resData.data === undefined){
         this.$message({
            showClose: true,
            message:"请先在财务管理-银行账户中完善银行信息",   
            type: "warning"
          });
      }else{
          this.dialogVisible = true;
      }
    },
    // 提现成功关闭按钮
    Close(){
      this.dialogVisible = false;
      this.CashSuccess = false;
      this.getData();
      this.MoneyDatas();
    },
    // 弹框点击提交方法
    Submission() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/goods/xzs/bill.apply.submit";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      }).then(res => {
          if (res.data.errorCode == "0") {
            this.CashSuccess = true;
          }
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 弹框关闭按钮
    handleClose(done) {
      done();;
    },
    //获取结算中心 累计收入金额
    MoneyDatas() {
      this.url = "/api/goods/xzs/bill.amount.info.get";
      let organizationId = JSON.parse(
        localStorage.getItem("organizationIds")
      )[0];
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.MoneyData = res.data.data;
        })
        .catch(err => {});
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(
        localStorage.getItem("organizationIds")
      )[0];
      this.url = "/api/goods/xzs/bill.withdrawable.order.list.get";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId,
          pageNum: that.fengye,
          pageSize: "10"
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.tableData = res.data.data.pageList;
          console.log(this.tableData);
          this.pageData = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.handle_spanss {
  float: left;
  display: block;
  width: 10px;
  height: 20px;
  margin-top: 10px;
  margin-right: 10px;
  background: rgb(100, 116, 221);
}
.contents {
  background: white;
  border: 1px solid #ddd;
  height: 60px;
  padding: 28px;
  border-radius: 5px;
}
.divs {
  float: left;
  width: 200px;
  font-size: 18px;
  font-weight: bold
}
.div_p1 {
  margin-top: 20px;
}
.divs_A {
  display: block;
  float: right;
  font-weight: 100;
  margin-right: 50px;
  margin-top: -20px;
}
.Withdrawals {
  height: 40px;
}
.handle_span {
  float: left;
  display: block;
  width: 10px;
  height: 20px;
  margin-top: 2px;
  margin-right: 10px;
  background: rgb(100, 116, 221);
}
.Cash_spans {
  border-top: 1px solid rgb(204, 204, 204);
  display: block;
  margin-top: -10px;
  color: red;
  line-height: 60px;
  text-align: center;
}
.Cash_spans p {
  width: 440px;
  margin: 0 auto;
}
.Cash_Bank {
  display: block;
  width: 85%;
  margin: 30px auto 20px auto;
  border-bottom: 1px solid rgb(242, 242, 242);
}
.Cash_Bank_Arrival {
  margin: 10px 0 10px 0;
}
.Cash_Bank_account {
  float: right;
  margin-top: -27px;
  overflow: hidden;
}
</style>
